<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>建学堂资源地图</title>
    <link rel="stylesheet" href="css/dataMap.css" />
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/raphael-min.js"></script>
    <script type="text/javascript" src="js/lib/TweenMax.js"></script>
    <script type="text/javascript" src="js/res/chinaMapConfig.js"></script>
    <script type="text/javascript" src="js/res/worldMapConfig.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>

<body>
    <div class="logo"></div>
    <div class="mapDiv">
        <div id="ChinaMap">
        </div>
        <div class="dots">
            <div class="dot country cur" title="全国" name="quanguo"></div>
            <div class="dot sx" title="陕西" name="shaanxi"></div>
            <div class="dot gs" title="甘肃" name="gansu"></div>
            <div class="dot henan" title="河南" name="henan"></div>
            <div class="dot hb" title="湖北" name="hubei"></div>
            <div class="dot sc" title="四川" name="sichuan"></div>
            <div class="dot gz" title="贵州" name="guizhou"></div>
            <div class="dot yn" title="云南" name="yunnan"></div>
            <div class="dot sd" title="山东" name="shandong"></div>
            <div class="dot cq" title="重庆" name="chongqing"></div>
            <div class="dot gx" title="广西" name="guangxi"></div>
            <div class="dot hebei" title="河北" name="hebei"></div>
            <!-- <div class="dot xinjiang" title="新疆" name="xinjiang"></div> -->
            <div class="dot xizang" title="西藏" name="xizang"></div>
            <div class="dot qinghai" title="青海" name="qinghai"></div>
            <div class="dot neimongol" title="内蒙古" name="neimongol"></div>
            <div class="dot heilongjiang" title="黑龙江" name="heilongjiang"></div>
            <div class="dot jilin" title="吉林" name="jilin"></div>
            <div class="dot liaoning" title="辽宁" name="liaoning"></div>
            <div class="dot shanxi" title="山西" name="shanxi"></div>
            <div class="dot anhui" title="安徽" name="anhui"></div>
            <div class="dot jiangxi" title="江西" name="jiangxi"></div>
            <div class="dot hunan" title="湖南" name="hunan"></div>
            <div class="dot fujian" title="福建" name="fujian"></div>
            <div class="dot zhejiang" title="浙江" name="zhejiang"></div>
            <div class="dot jiangsu" title="江苏" name="jiangsu"></div>
            <div class="dot guangdong" title="广东" name="guangdong"></div>
            <div class="dot hainan" title="海南" name="hainan"></div>
            <div class="dot tianjin" title="天津" name="tianjin"></div>
            <div class="dot beijing" title="北京" name="beijing"></div>
            <div class="dot shanghai" title="上海" name="shanghai"></div>
            <div class="dot ningxia" title="宁夏" name="ningxia"></div>
        </div>
    </div>
    <div class="dataWrapper">
        <div class="dataContent">
            <div class="data_tit" style="display: none;">
            </div>
            <div class="dataDiv">

                <div class="dataMain">
                    <span class="province">全国</span>
                    <div class="data_hd">
                        <p>资源总量</p>
                        <p>
                            <span class="zongliang bigNumber"></span>份</p>
                    </div>
                    <a href="http://www.baidu.com">
                        <div class="data_bd">
                            <p>
                                <span class="data_name">语文</span>
                                <span class="fr data_num yuwen"></span>
                            </p>
                            <p>
                                <span class="data_name">数学</span>
                                <span class="fr data_num shuxue"></span>
                            </p>
                            <p>
                                <span class="data_name">英语</span>
                                <span class="fr data_num yingyu"></span>
                            </p>
                            <p>
                                <span class="data_name">品德</span>
                                <span class="fr data_num pinde"></span>
                            </p>
                            <p>
                                <span class="data_name">信息技术</span>
                                <span class="fr data_num xinxijishu"></span>
                            </p>
                            <p>
                                <span class="data_name">体育</span>
                                <span class="fr data_num tiyu"></span>
                            </p>
                            <p>
                                <span class="data_name">音乐</span>
                                <span class="fr data_num yinyue"></span>
                            </p>
                            <p>
                                <span class="data_name">美术</span>
                                <span class="fr data_num meishu"></span>
                            </p>
                        </div>
                    </a>
                    <!-- <div class="data_bd nationwide">
	                <p>对口帮扶<span class="num">730</span>个贫困县
	                </p>
	            </div> -->
                </div>


            </div>
        </div>
        <div class="lvoeGoodsWrapper">
            <img src="images/{B34FD08A-69B2-41B6-93E7-42248ADFC0B8}.jpg" />
            <span>
                <!--使图片垂直居中-->
            </span>
        </div>
        <!-- <div class="btnBox"><a href="#" class="btn_love">我要献爱心</a></div> -->
    </div>
    <div class="nav">
        <ul>
            <li class="cur">全国</li>
            <li>陕西</li>
            <li>甘肃</li>
            <li>河南</li>
            <li>湖北</li>
            <li>四川</li>
            <li>贵州</li>
            <li>云南</li>
            <li>山东</li>
            <li>重庆</li>
            <li>广西</li>
            <li>河北</li>
        </ul>
    </div>
    <div class="text">
        <ul class="color-exam-wrap">
            <li>
                <span class="color-block block01"></span>
                <span class="color-text">
                    <5万</span>
            </li>
            <li>
                <!--空li-->
            </li>
            <li>
                <span class="color-block block02"></span>
                <span class="color-text">
                    6万~8万</span>
            </li>
            <li>
                <span class="color-block block03"></span>
                <span class="color-text">
                    12万~13万</span>
            </li>
            <li>
                <span class="color-block block04"></span>
                <span class="color-text">
                    8万~9万</span>
            </li>
            <li>
                <span class="color-block block05"></span>
                <span class="color-text">
                    13万~14万</span>
            </li>
            <li>
                <span class="color-block block06"></span>
                <span class="color-text">
                    9万~10万</span>
            </li>
            <li>
                <span class="color-block block07"></span>
                <span class="color-text">
                    14万~15万</span>
            </li>
            <li>
                <span class="color-block block08"></span>
                <span class="color-text">
                    10万~11万</span>
            </li>
            <li>
                <span class="color-block block09"></span>
                <span class="color-text">
                    15万~17万</span>
            </li>
            <li>
                <span class="color-block block10"></span>
                <span class="color-text">
                    11万~12万</span>
            </li>
            <li>
                <span class="color-block block11"></span>
                <span class="color-text">
                    17万~19万</span>
            </li>

        </ul>
    </div>

    <script>

        //当前激活的是否是全国
        var isActiveWholeChina = true;

        /**
         * 给定一个渐变色的两端，生成之间的色值，count为色值的数量
         * 
         * */
        function getSepColor(startColor, endColor, count) {
            //先转成10进制
            startColor = startColor.substr(1);
            endColor = endColor.substr(1);
        }
        //填充色
        var fillColor = '#39a653';//原来的#9e331e
        /***最佳适配分辨率 1920*1080***/
        var colors = {
            shaanxi: "#75fbfd",
            gansu: "#f2fe67",
            henan: "#f2fe67",
            hubei: "#8c9ffe",
            sichuan: "#8c9ffe",
            guizhou: "#4ba1ff",
            yunnan: "#75fbfd",
            shandong: "#6de5b9",
            chongqing: "#7a58ff",
            guangxi: "#4ba1ff",
            hebei: "#4ba1ff",
            heilongjiang: "#4ba1ff",
            jilin: "#75fbfd",
            liaoning: "#75fbfd",
            jiangsu: "#60bbff",
            zhejiang: "#4ba1ff",
            shanxi: "#6de5b9",
            jiangxi: "#4ba1ff",
            fujian: "#75fbfd",
            hunan: "#0036ff",
            qinghai: "#7a58ff",
            hainan: "#6de5b9",
            shanghai: "#f2fe67",
            tianjin: "#75fbfd",
            beijing: "#6de5b9",
            ningxia: "#3364f6",
            neimongol: "#333",
            xinjiang: "#a1e885",
            xizang: "#333",
            guangdong: "#60bbff",
            anhui: "#4ba1ff"
        };
        var data = {};
        var provinceList = ["shaanxi", "gansu", "henan", "hubei", "sichuan", "guizhou", "yunnan",
            "shandong", "chongqing", "guangxi", "hebei", "heilongjiang", "jilin", "liaoning",
            "jiangsu", "zhejiang", "anhui", "shanxi", "jiangxi", "fujian", "hunan", "qinghai",
            "hainan", "shanghai", "tianjin", "beijing", "ningxia", "neimongol", "xinjiang", "xizang",
            "guangdong", "hongkong", "taiwan", "macau"];
        provinceList.forEach((item, index) => {
            data[item] = { "disabled": false, "index": index + 1, "stateInitColor": colors[item], "stateSelectedColor": "", "name": item };
        });
        var disabledList = ["hongkong", "taiwan", "macau", "xinjiang"];
        //置灰
        disabledList.forEach((item, index) => {
            data[item] = { "disabled": true };
        });

        /**
                for(let key in colors){
                    data[key]["initColor"] = colors[key]; 
                }**/
        //通过Index获取Province;
        function getProvinceByIndex(index) {
            var result = null;
            for (let province in data) {
                if (data[province].index == index) {
                    result = data[province];
                }
            }
            return result;
        }

        var mapObj = {};
        var index = 0; //当前index

        $(function () {
            //屏幕尺寸适配
            var nSize = $(window).width() / 1920 * 100;
            var mapW = nSize * 9.2;
            var mapH = nSize * 7.2;
            $("html").css("font-size", nSize);

            //初始化svg地图
            var svgMap = $('#ChinaMap').SVGMap({
                external: mapObj,
                mapName: 'china',
                mapWidth: mapW,
                mapHeight: mapH,
                showTip: false,
                stateData: data,
                hoverCallback: function (stateData, obj) {
                    obj.attr({
                        'stroke-width': 2,
                        'fill-opacity': 1
                    });
                    // obj.scale(1.1,1.1);
                    obj.transform('0s1.03');
                    obj.toFront();
                    //让当前的点变黄
                    $('.dots .dot[name='+obj.id+']').addClass('cur');
                },
                clickCallback: function (stateData, obj) {
                    var province = stateData[obj.id]
                    proClick(province);
                }
            });
            //点击小圆点
            var lastProvince = null;
            $(".dots .dot").click(function () {
                var index_dot = $(".dots .dot").index(this);
                var selectName = $(".dots .cur").attr("name");
                var thisName = $(this).attr('name');
                index = index_dot;
                // var currentProvince = getProvinceByIndex(index)
                var currentProvince = data[thisName];
                proClick(currentProvince);
                //点击小圆点需要完全模拟点击省份，所以需要取消上个点击的选中状态
                //去掉所有省份的选中状态
                // svgMap.render();
                mapObj[thisName].attr({
                    fill: svgMap.options.stateSelectedColor
                });


                lastProvince = currentProvince;
                // mapObj[selectName].attr({
                //     fill: "rgba(0,69,88,.78)"
                // });
            });
            //点击其它地方显示全国数据
            $('body').click(function (e) {
                var target = $(e.target);
                if (target.is('.svggroup *') || target.is('.nav *') || target.is('.dataWrapper *') || target.is('.dots *')) {
                    return;
                } else {
                    if(isActiveWholeChina){
                        return;
                    }else{
                        function getData() {
                            var provinceName = $(".dots .cur").attr("name");
                            var oldColor = colors[provinceName];
                            mapObj[provinceName].attr({ fill: oldColor });//恢复已选省份颜色
                            wholeChina();
                        }
                        switchCard(getData);
                        isActiveWholeChina = true;
                    }
                    
                };
            });


        });

        var date1 = {
            province: ["全国", "北京", "天津", "上海", "重庆", "河北", "辽宁", "黑龙江", "吉林", "山东", "山西", "安徽", "浙江", "江苏", "江西", "广东", "福建", "海南", "河南", "湖北", "湖南", "四川", "云南", "贵州", "陕西", "甘肃", "青海", "宁夏", "内蒙古", "广西", "西藏", "新疆"],
            zongliang: [3274030, 104165, 116933, 153732, 89280, 90672, 119209, 94344, 119448, 108939, 100308, 93124, 94852, 122054, 98343, 120303, 114376, 102945, 143731, 136773, 185014, 138892, 116133, 96211, 116905, 154379, 82008, 69577, 48736, 95805, 46840, 42236],
            yuwen: [754190, 27138, 22233, 36634, 22068, 21922, 28476, 24650, 22335, 29748, 23387, 26481, 26307, 34171, 29581, 26802, 35697, 28064, 26090, 28308, 27668, 33108, 28788, 24650, 19792, 26076, 12697, 12855, 10298, 24472, 13694, 11029],
            shuxue: [762024, 25805, 22209, 32443, 24702, 26986, 19792, 22335, 25558, 30942, 25475, 27172, 29684, 21771, 24568, 28113,
                34036, 28023, 36735, 31422, 33529, 33342, 29502, 22335, 25558, 30877, 11177, 10334, 10299, 28859, 8441, 7819],
            yingyu: [687222, 25709, 25049, 29824, 20334, 20938, 29931, 21809, 23502, 21774, 23420, 19927, 20519, 29332, 21373, 23032,
                21338, 22951, 31409, 31374, 28705, 26608, 26574, 21809, 23502, 27254, 15439, 10348, 12647, 21901, 889, 7689],
            pinde: [363549, 11241, 10352, 10551, 6972, 6972, 21809, 11770, 17003, 9852, 11071, 6555, 6554, 20501, 11063, 15982, 9261,
                10406, 16570, 16572, 7095, 21756, 11772, 11770, 17003, 21776, 10350, 10478, 4498, 7522, 8472, 1029],
            xinxijishu: [260779, 3758, 25564, 32361, 5002, 4522, 6442, 4955, 11256, 5488, 5218, 4001, 3617, 5153, 3964, 9005, 4390, 4174,
                16422, 11242, 8915, 11141, 6442, 6822, 11256, 16575, 11367, 9530, 3162, 5938, 3097, 3901],
            tiyu: [214606, 4152, 6073, 6086, 3525, 3227, 4485, 3051, 8955, 4005, 4848, 3173, 2904, 4037, 2746, 8059, 3605, 3464, 5931,
                5925, 66135, 5914, 4485, 3051, 8955, 14340, 7523, 6882, 2991, 4006, 2074, 1929],
            yinyue: [124272, 3016, 2609, 2703, 3035, 3159, 4659, 2474, 5927, 4475, 4183, 2428, 2527, 3727, 1979, 4742, 3580, 3346, 5834,
                6875, 6600, 4272, 4955, 2474, 5927, 9006, 6917, 6662, 2734, 1890, 1557, 1021],
            meishu: [107389, 3346, 2844, 3130, 3642, 2946, 3615, 3300, 4912, 2655, 2706, 3387, 2740, 3362, 3069, 4568, 2469, 2517, 4740,
                5055, 6367, 2751, 3615, 3300, 4912, 8475, 6538, 2488, 2107, 1217, 616]
        };



        var dots = document.getElementsByClassName("dot");
        var lis = $(".nav li");
        var len = lis.length;
        /*for (var i = 0; i < dots.length; i++) {
            (function (i) {
                dots[i].onclick = function () {
    
                    if (i != 0) {
                        $(".nationwide").hide();
                    } else {
                        $(".nationwide").show();
                    }
                    ;
                    lis.eq(i).addClass("cur").siblings().removeClass("cur");
                    getDate(i);
    
                }
                lis.eq(i).on("click", function () {
                    if (i != 0) {
                        $(".nationwide").hide();
                    } else {
                        $(".nationwide").show();
                    }
                    ;
    
                    $(this).addClass("cur").siblings().removeClass("cur");
                    getDate(i);
                })
    
            })(i)
        }*/
        //自动轮播
        // auto();
        function auto() {
            function startMove() {
                lis.eq(index).addClass("cur").siblings().removeClass("cur");
                //$(".dots .dot").removeClass('cur');
                //$(".dots .dot").eq(index).addClass("cur");
                //dots[index].click();
                if (index != 0) {

                    var thisName = $(".dots .dot").eq(index).attr("name");
                    var selectName = $(".dots .cur").attr("name");
                    proClick(getProvince(index));
                    mapObj[thisName].attr({
                        fill: fillColor
                    });
                    mapObj[selectName].attr({
                        fill: "rgba(0,69,88,.78)"
                    });
                    $(".nationwide").hide();
                } else {
                    wholeChina();
                    //$(".nationwide").show();
                };
                //getDate(index);
                index++;
                if (index >= len) {
                    index = 0;
                }
            }
            var timer = setInterval(startMove, 2000);
            $(".nav,#ChinaMap").mouseover(function () {
                clearInterval(timer);
            });
            $(".nav,#ChinaMap").mouseout(function () {
                clearInterval(timer);
                timer = setInterval(startMove, 2000);
            })

            //点击爱心按钮
            $('.btnBox .btn_love').on('click', function () {
                clearInterval(timer);
                $('.dataContent').hide();
                $('.lvoeGoodsWrapper').show();
            });
            $('body').click(function (e) {
                var target = $(e.target);
                console.log(target)
                if (target.is('.lvoeGoodsWrapper *') || target.is('.btnBox *')) {
                    return;
                } else {
                    clearInterval(timer);
                    timer = setInterval(startMove, 2000);
                    $('.dataContent').show();
                    $('.lvoeGoodsWrapper').hide();
                };
            });

        };
        //获取后台数据
        function getDate(province) {
            if (province == 0) {
                num = province;
            } else {
                //找到对应的中文省份名称
                var provinceChineseName = chinaMapConfig.names[province.name];
                //取得数据列
                num = date1.province.indexOf(provinceChineseName);
            }

			/*$(".dataMain>div").slideUp(500);
			$(".dataMain>div").slideDown(500);*/
            $(".province").html(date1.province[num]);
            $(".zongliang").html(date1.zongliang[num]);
            $(".yuwen").html(date1.yuwen[num]);
            $(".shuxue").html(date1.shuxue[num]);
            $(".yingyu").html(date1.yingyu[num]);
            $(".pinde").html(date1.pinde[num]);
            $(".xinxijishu").html(date1.xinxijishu[num]);
            $(".tiyu").html(date1.tiyu[num]);
            $(".yinyue").html(date1.yinyue[num]);
            $(".meishu").html(date1.meishu[num]);
        };


        //点击地图上扶贫省份
        var activeProvince = null;
        function proClick(province) {
            isActiveWholeChina = false;
            if(province === activeProvince){
                return;
            }
            //动画切换1.先隐藏
            function getData(){
                var index = province.index;
                $(".dots .dot[name=" + province.name + "]").addClass("cur").siblings().removeClass("cur");
                // $(".dots .dot").eq(index).addClass("cur").siblings().removeClass("cur");
                $(".nav li").eq(index).addClass("cur").siblings().removeClass("cur");
                $(".nationwide").hide();
                getDate(province);
            }
            switchCard(getData);
            activeProvince = province;
        }

        function switchCard(getDataFunc){
            TweenMax.to('.dataWrapper', 0.3, {
                right: '-=2rem', 'opacity': 0, 'clearProps': 'transform', onComplete: function () {
                    $('.dataWrapper').css('right', '4.3rem')
                    getDataFunc && getDataFunc();
                    //动画切换2.移动到左边
                    TweenMax.to('.dataWrapper', 0.3, {
                        right: '-=2rem', 'opacity': 1
                    });
                }
            });
        }


        //全国
        function wholeChina() {
            $(".dots .dot").eq(0).addClass("cur").siblings().removeClass("cur");
            $(".nav li").eq(0).addClass("cur").siblings().removeClass("cur");
            $(".nationwide").show();
            getDate(0);
        };

        //点击列表
        $(".nav li").on('click', function () {
            var index = $(this).index();
            if (index == 0) {
                wholeChina();
            } else {
                proClick(getProvinceByIndex(index));
            }
        });


        //初始化数据
        getDate(0)
    </script>

</body>

</html>